<template>
  <div class="add" ref="add">
    <!-- <header-text></header-text> -->
    <div class="adduser">
      <!-- 添加公告内容 -->
      <div class="content">
        <span class="text">文章分类名称：</span>
        <el-select v-model="value_text" placeholder="请选择分类文章名">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- <el-input type="textarea" autosize placeholder="请输入公告内容" v-model="textarea1"></el-input> -->
      </div>
      <div class="content">
        <span class="text">文章标题：</span>
        <el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea1" @blur="textarea1 = publick.clearinput(textarea1)"></el-input>
      </div>
      <div class="content">
        <span class="text">文章简介描述：</span>
        <el-input type="textarea" autosize placeholder="请输入内容" v-model="describe" @blur="describe = publick.clearinput(describe)"></el-input>
      </div>
      <div class="content">
        <span class="text">文章简介内容：</span>
        <el-input type="textarea" autosize placeholder="请输入内容" v-model="content" @blur="content = publick.clearinput(content)"></el-input>
      </div>
      <div class="content">
        <span class="text">文章预览数：</span>
        <el-input type="number" autosize placeholder="请输入人数" v-model="view_number" ></el-input>
      </div>
      <!-- 显示状态 -->
      <div class="content">
        <span class="text">显示状态：</span>
        <el-switch
          style="display: block"
          v-model="value"
          active-color="#13ce66"
          active-value="1"
          inactive-value="0"
          active-text="已启用"
          inactive-text="已禁用"
        ></el-switch>
      </div>
      <!-- 添加公告内容 -->
      <div class="content">
        <span class="text">排序：</span>
        <el-input type="number" placeholder="请输入1~99的合法数字" v-model="sort" max="100" min="1"></el-input>
      </div>
      <div class="content">
        <span class="text">文章图标：</span>
        <el-upload
          class="avatar-uploader"
          action="https://api.xujiangyu.com/admin/upimage/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload_one"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="but">
        <el-button type="primary" round @click="add()">确认添加</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import HeaderText from "../../components/from/HeaderText";
import axios from "axios";
export default {
  data() {
    return {
      // 添加公告
      textarea1: "", //公告内容
      value_text: "", //分类id
      value: "", //显示状态
      sort: "", //排序
      remake: "", //备注
      options: [], //select选项值
       imageUrl: "", //公告图标
      img_gg: "", //公告图标地址
      api: "https://api.xujiangyu.com/admin", //上传图片域名
      img_id: "",//图片id
      describe:'',//文章描述
      content:"",//文章内容
      view_number:'',//查阅人数
    };
  },
  components: {
    // HeaderText
  },
  mounted() {
    // 获取文章分类名称
    this.$api
      .getArticleCate({
        token: this.publick.token()
      })
      .then(res => {
        let data = res.data;
        let datas = data; //分类页面传来的列表值
        console.log(datas);
        datas.forEach(e => {
          let params = {};
          params.label = e.catename;
          params.value = e.artice_cate_id;
          this.options.push(params);
        });
      })
      .catch(res => {
        console.log(res);
      });
  },
  methods: {
    //添加列表数据
    add() {
      this.$api
        .articleAdd({
          name: this.textarea1,
          is_show: this.value,
          image_id:this.img_id,
          image_url:this.img_gg,
          describe:this.describe,
          content:this.content,
          view_number:this.view_number,
          token: this.publick.token(),
          sort: this.sort,
          artice_cate_id: this.value_text
        })
        .then(res => {
          this.$message({
            type: "success",
            message: res.message
          });
          setTimeout(() => {
            this.$router.push({
              path: "/essaylist",
              query: {
                type: "addlist"
              }
            });
            this.textarea1 = "";
            this.value = "";
            this.sort = "";
            this.remake = "";
          }, 1000);
        })
        .catch(res => {
          console.log(res);
        });
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 判断周期图片
    beforeAvatarUpload_one(file) {
      const isJPG = file.type === "image/jpeg";
      const isGIF = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isBMP = file.type === "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.common.errorTip("上传图片必须是JPG/GIF/PNG/BMP 格式!");
      }
      if (!isLt2M) {
        this.common.errorTip("上传图片大小不能超过 2MB!");
      }
      // 上传图片
      var param = new FormData();
      param.append("images", file, file.name);
      param.append("token", this.publick.token());
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios.post(this.api + "/upimage", param, config).then(response => {
        console.log(response);
        this.img_gg = response.data.data.images;
        this.img_id = response.data.data.images_id;
      });
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    }
  }
};
</script>

<style scoped>
.add {
  width: 100%;
  height: 89vh;
  overflow: auto;
  background: #eff2f7;
}
.adduser {
  width: 100%;
  /* height: 82.1vh; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 5vh;
}
.content {
  width: 95%;
  height: 10vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.text {
  font-size: 16px;
  display: block;
  width: 200px;
  text-align: center;
}
.but {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
  width: 100%;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>
